import React from "react";
import Button from "./Button";

import gamepadImg from "../assets/gamepad.png";

const Guide = ({ config }) => {
  return (
    <div className="absolute inset-0 bg-gray-900/70 z-50">
      <div className="w-full h-full flex flex-col items-center justify-evenly">
        {/* <h2 className="text-2xl font-bold mb-4 text-center">游戏手柄操作指引</h2> */}
        <div className="flex justify-center relative w-2/5 mx-auto">
          <img src={gamepadImg} className="w-full h-full object-contain" />
        </div>
        <div className="bg-gray-100/10 p-2 lg:p-4 rounded-lg">
          <h3 className="text-white text-sm lg:text-lg mb-2">特殊功能</h3>
          <ul className="list-disc list-inside space-y-1 text-white text-xs lg:text-sm">
            <li>
              <strong>Back+Start键</strong>: 长按3秒切换手柄配置模式
            </li>
            <li>
              <strong>Back+A键</strong>: 同时按下切换虚拟鼠标模式
              <p className="text-xs text-gray-300">
                鼠标模式通过左摇杆控制移动方向，A键点击触发点击事件
              </p>
            </li>
            <li>
              <strong>Back+B键</strong>: 同时按下切换游戏手柄模式
            </li>
            <li>
              <strong>Back+X键</strong>: 同时按下打开手柄操作说明
            </li>
          </ul>
        </div>
      </div>
      <div className="absolute w-full h-full top-0 left-0 right-0 bottom-0 z-50">
        {config?.buttons &&
          config.buttons.map(({ keycode, type, mode, x, y }, index) => {
            return (
              <div
              className="absolute cursor-move shadow-lg flex items-center justify-center"
                style={{
                  left: `${x}px`,
                  top: `${y}px`,
                  transform: "translate(-50%, -50%)",
                  touchAction: "none", // 防止移动端触摸滚动
                }}
                key={index}
              >
                <Button keycode={keycode} type={type} mode={mode} />
              </div>
            );
          })}
      </div>
    </div>
  );
};

export default Guide;
